extends /templates/base-flat

block page_nav
  include ../courses/teacher-dashboard-nav
  .do-not-print.container
    span.backlink
      a(href='/teachers/guide/codecombat')
        |&lt;
        span= ' '
        spna(data-i18n="teacher.back_to_course_guides")
    if view.paidTeacher || (view.course && view.course.get('free') || view.campaign && view.campaign.get('type') == 'hoc')
      .quick-actions-container
        a.print-btn.btn.btn-md.btn-navy(href='javascript:window.print()')
          span.glyphicon.glyphicon-print &#160;
          span(data-i18n="teacher.print_guide")
        - var courseResources = view.courseResources
        if courseResources && courseResources.length
          for resource in (courseResources || []).filter(r => /Lesson Slides/.test(r.name))
            a.lesson-slides-btn.btn.btn-md.btn-navy(href=i18n(resource, 'link'))
              span.glyphicon.glyphicon-folder-open &#160;
              span(data-i18n="courses.lesson_slides")

block content

  if !me.isTeacher() && !me.isAdmin() && !me.isParentHome()
    a(href="/")
      img#nav-logo(src="/images/pages/base/logo.png", title="CodeCombat - Learn how to code by playing a game", alt="CodeCombat")
    h2.text-center(data-i18n="teacher.teacher_account_required")
  else if !view.paidTeacher && (view.course && !view.course.get('free') || view.campaign && view.campaign.get('type') != 'hoc') && !me.isParentHome()
    //  should we make them available for non paid parents?
    h2.text-center(data-i18n="courses.solutions_require_licenses")
  else
    .text-center
      img(src="http://direct.codecombat.com/images/pages/base/logo.png")
      if (view.course && view.course.loaded || view.campaign && view.campaign.loaded)
        if view.course
          h1 #{i18n(view.course.attributes, 'name')}
        else
          h1 #{i18n(view.campaign.attributes, 'fullName')}
        h3 #{view.prettyLanguage}
        if view.course
          i= i18n(view.course.attributes, 'description')
    br

    if view.levels
      h3(data-i18n="common.table_of_contents")
      each level, index in view.levels.models
        .small
          if !view.isJunior || !level.get('practice')
            a.show-level-data(data-slug=`${level.get('slug')}` href=`#${level.get('slug')}`) #{view.levelNumberMap[level.get('original')]}. #{i18n(level.attributes, 'displayName') || i18n(level.attributes, 'name')}
            if view.isJunior
              - let practiceLevels = view.levels.models.filter(l => l.get('practice') &&  l.get('name').match(level.get('name')))
              if practiceLevels.length > 0
                button.show-practice-levels-button(data-slug=`${level.get('slug')}`) 
                  if view.showPracticeLevelsForSlug === level.get('slug')
                    span(data-i18n="teacher.hide_practice_levels")
                  else
                    span(data-i18n="teacher.show_practice_levels")
                if view.showPracticeLevelsForSlug === level.get('slug')
                  .practice-levels
                    each practiceLevel in practiceLevels
                      .small
                        - let practiceSelected = view.shownLevelModels.indexOf(practiceLevel) !== -1;
                        a.show-level-data(class=practiceSelected ? 'selected' : '' data-slug=`${practiceLevel.get('slug')}` href=`#${practiceLevel.get('slug')}`) #{view.levelNumberMap[practiceLevel.get('original')]}. #{i18n(practiceLevel.attributes, 'displayName') || i18n(practiceLevel.attributes, 'name')}
      br

      each level, index in view.shownLevelModels
        - var langClass = 'lang-' + (level.get('primerLanguage') || view.language || 'python');
        - if (!level.get('primerLanguage') && view.isWebDev) langClass = 'lang-html';
        h2.page-break-before(id=level.get('slug')) ##{view.levelNumberMap[level.get('original')]}. #{i18n(level.attributes, 'displayName') || i18n(level.attributes, 'name')}
        h3(data-i18n="teacher.level_overview_solutions")
        i #{i18n(level.attributes, 'description')}
        div
          if level.get('intro')
            h4.text-center(data-i18n="common.intro")
            p!= level.get('intro')
          h4.text-center(data-i18n="common.default_code")
          if level.get('begin')
            pre
              code(class=langClass)= level.get('begin')
          else
            .text-center
              i(data-i18n="common.coming_soon")
        div.overview
          br
          if level.get('guide')
            h4.text-center(data-i18n="common.overview")
            p!= level.get('guide')
          h4.text-center
            span= i18n(level.attributes, 'displayName') || i18n(level.attributes, 'name')
            span.spl(data-i18n="common.solution")
          if level.get('assessment') === 'open-ended'
            em(data-i18n="teacher.explain_open_ended")

          - var solutions = view.levelSolutionsMap[level.get('original')] || [];
          if solutions.length === 1
            each solution in solutions
              pre
                code(class=langClass)= solution.source
          else if solutions.length > 0
            div(role='tabpanel')
              ul.nav.nav-tabs(role='tablist')
                each solution, index in solutions
                  li.nav-item(class=(index === 0 ? 'active' : ''))
                    - var target = level.get('original') + index;
                    a.nav-link(id=`${target}-tab`, class=(index === 0 ? 'active' : ''), href=`#${target}`, role="tab", data-toggle="tab", aria-controls=target, aria-selected=(index === 0), data-level-slug=level.get('slug'), data-solution-index=index)
                      if index === 0
                        strong.text-center(data-i18n="teacher.complete_solution")
                      else
                        .text-center
                          span(data-i18n="teacher.partial_solution")
                          =" "
                          span= index
                  if index < solutions.length - 1
                    .tab-spacer
                  else
                    .tab-filler
              .tab-content
                each solution, index in solutions
                  - var target = level.get('original') + index;
                  div.tab-pane(id=target, class=(index === 0 ? 'active' : ''), role=tabpanel, aria-labelledby=`${target}-tab`)
                    div!= marked(solution.description || '')
                    pre
                      code(class=langClass)= solution.source
          else
            .text-center
              if level.isProject()
                i(data-i18n="teacher.solution_project_blurb")
              else
                i(data-i18n="common.coming_soon")
        hr
        br
